<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <meta blitz-debugger='localhost'>
    <meta name="viewport" content="width=1920">
    <title>demo</title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="lib/ScrollSelector/ScrollSelector.css">
</head>

<body fe-role="Switch">
<div class="scroller" id="province" fe-role="Widget">
</div>
<div id="city" class="scroller" fe-role="Widget">
</div>
<script src="./lib/FocusEngine.js"></script>
<script src="lib/ScrollSelector/ScrollSelector.js"></script>
<script src="data.js"></script>
<script>
    var root = FocusEngine.render();
    var domProvince = document.getElementById('province');
    var provinceSelector = new ScrollSelector(domProvince, root);
    var domCity = document.getElementById('city');
    var citySelector = new ScrollSelector(domCity, root);

    provinceSelector.setItemData(function (data) {
        return {name: data.name, value: data.id};
    });
    provinceSelector.setData(data);
    provinceSelector.onChange(function (data) {
        console.log('onchange value:',data);
        citySelector.setData(data.cityList);
    });

    citySelector.setItemData(function (data) {
        return {name: data.name, value: data.id};
    });
    citySelector.setData(data[0].cityList);
    citySelector.onChange(function (data) {
        console.log('您选择的城市是:' + data.name);
        console.log('城市id:' + data.id);
    });
    console.log(citySelector.getSelectedData());
</script>
</body>
</html>
